<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>掘金个人练习</title>
  <style></style>
  <link rel="stylesheet" href="./junjin_3.1.css" />
  <link rel="stylesheet" href="./css/bootstrap-icons.css">
  <link rel="stylesheet" href="./js/bootstrap.bundle.js">
</head>

<body>
  <!-- 第一部分导航栏 
logo一个div
列表栏一个div 包着六个li
年度报告一个div
搜索框和按钮一个div
提醒和个人中心一个div -->
  <!-- 第一行导航栏 -->
  <div class="nav">
    <div class="nav-d1">
      <h2>LOGO</h2>
    </div>
    <div class="nav-d2">
      <ul>
        <li>首页</li>
        <li>沸点</li>
        <li>课程</li>
        <li>资讯</li>
        <li>活动</li>
        <li>开放社区</li>
        <li>下载APP</li>
        <li>浏览器插件</li>
      </ul>
    </div>
    <div class="nav-d3">
      <h3>你的年度报告</h3>
    </div>
    <div class="nav-d4">
      <input type="text" placeholder="探索稀土掘金">
      <button>创作者中心</button>
    </div>
    <div class="nav-d5">
      <h3>个人中心</h3>
    </div>
  </div>
  <!-- 第二层导航栏 -->
  <div class="nav">
    <!-- nav_2为版心 -->
    <div class="nav_2">
      <div class="nav_left">
        <ul>
          <li>综合</li>
          <li>关注</li>
          <li>后端</li>
          <li>前端</li>
          <li>Android</li>
          <li>IOS</li>
          <li>人工智能</li>
          <li>开发工具</li>
          <li>代码人生</li>
          <li>阅读</li>
        </ul>
      </div>
      <div class="nav_right">
        <span>标签管理</span>
      </div>
    </div>
  </div>

  <!-- 第三层文本栏 -->
  <div class="nav_2">
    <div class="text">
      <div class="nav_3">
        <ul>
          <li>推荐</li>
          <li>最新</li>
          <li>热榜</li>
        </ul>
      </div>

      <!-- 第四层文本 正文 -->
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
      <div class="nav_4"></div>
    </div>

    <!-- 版心内的右侧广告区域 -->
    <div class="right">
      <div class="right_1">
        <div>
          <span class="bi-table"><b>&nbsp;晚上好!</b></span>
          <button>去签到</button>
        </div>
        <div>
          <p>点亮你在社区的每一天</p>
        </div>
      </div>

      <!-- 版心内右侧广告图片 -->
      <div class="right_2">
        <img
          src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6175104aec964d3f88670c283bd8b336~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
          alt="">
      </div>


      <!-- 版心内右侧第三张图片 -->
      <div class="right_2">
        <img
          src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad80d84bbf754ca3ab1dff6c6bf5b64b~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
          alt="">
      </div>

      <!-- 右侧版心内第四行 下载二维码 -->
      <div class="right_4">
        <div>
          <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/home.e8f8c43.png" alt="">
        </div>
        <div>
          <h5>下载稀土掘金APP</h5>
          <p>一个帮助开发者成长的社区</p>
        </div>
      </div>

      <!-- 右侧版心内第五行,榜单 -->
      <div class="right_5">
        <ul>
          <li class="bi-award">作者榜</li>
          <li>
            <img src="https://p26-passport.byteacctimg.com/img/user-avatar/9df05ee4be63fc38375bdfeb9931fa6f~300x300.image" alt="">
            <p>华为云开发者社区</p>
          </li>
          <li>
            <img src="https://p6-passport.byteacctimg.com/img/user-avatar/ceff4560c9a0b128a71587e297ef2617~300x300.image" alt="">
            <p>阿里巴巴云原生</p>
          </li>
          <li>
            <img src="https://p9-passport.byteacctimg.com/img/user-avatar/5c8a786c143537398f77e06aecc9ea0d~300x300.image" alt="">
            <p>是洋柿子啊</p>
          <li>
            <p>完整榜单 ></p>
          </li>
          </li>
        </ul>
      </div>

      <!-- 右侧版心内第六行 -->
      <div class="right_6">
        <ul>
          <li>
            <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-tutu.d58819c.png" alt="">
            <p>稀土掘金漫游指南</p>
          </li>
          <li>
            <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-extension-icon.4b79fb4.png" alt="">
            <p>安装掘金浏览器插件</p>
          </li>
          <li>
            <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-miner.b78347c.png" alt="">
            <p>前往掘金翻译计划</p>
          </li>
        </ul>
      </div>



















    </div>
  </div>
</body>

</html>